<template>
	<view
		class="xh-title-bar"
		:class="{ 'title-bottom-border': hasBottomBorder }"
		:style="{ background }"
	>
		<view :style="{ height: statusHeight }"></view>
		<view class="title-wrapper">
			<view class="box-item">
				<uni-icons
					v-if="!hideBack"
					@click="onClickBack"
					type="left"
					size="25"
				></uni-icons>
			</view>
			<view class="title-content">
				{{ title }}
			</view>
			<view class="box-item"></view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		background: {
			type: String,
			default: '#ffffff',
		},
		title: {
			type: String,
			default: '标题',
		},
		hideBack: {
			type: Boolean,
			default: false,
		},
		hasBottomBorder: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			statusHeight: '0',
		};
	},
	created() {
		const { statusBarHeight } = getApp().globalData.windowInfo;
		this.statusHeight = statusBarHeight + 'px';
	},
	methods: {
		onClickBack() {
			this.$nav.navigateBack();
		},
	},
};
</script>

<style scoped lang="scss">
.xh-title-bar {
	padding-left: 10px;
	&.title-bottom-border {
		border-bottom: 1px solid #dddddd;
	}
	.title-wrapper {
		display: flex;
		height: 46px;
		.box-item {
			display: flex;
			align-items: center;
			width: 100px;
		}
		.title-content {
			flex-grow: 1;
			font-weight: bold;
			font-size: 17px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
